<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>咕咕牛帮助</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=Orbitron:wght@400;500;700&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet">
	<style>
		:root {
			--bg-color: #1a1f2e;
			--container-bg: #22283a;
			--card-bg: #2d344a;
			--header-bg: #1e2436;
			--text-primary: #e0e5f0;
			--text-secondary: #9fadca;
			--accent-color: #43d8b8;
			--accent-glow: rgba(67, 216, 184, 0.15);
			--color-install: #28a745;
			--color-op: #17a2b8;
			--color-manage: #dc3545;
			--color-test: #ffc107;
            --color-third-party: #6f42c1;
		}
		
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		
		body {
			font-family: 'Noto Sans SC', sans-serif;
			background-color: var(--bg-color);
			color: var(--text-primary);
			padding: 20px;
			width: 840px;
			margin: 20px auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		
		.container {
			background-color: var(--container-bg);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			overflow: hidden;
		}
		
		.header {
			background-color: var(--header-bg);
			padding: 40px 30px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
		}
		
		.header-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.title-group h1 {
			font-family: 'Orbitron', sans-serif;
			font-size: 26px;
			font-weight: 700;
			color: var(--text-primary);
			text-shadow: 0 0 8px var(--accent-glow);
			letter-spacing: 1px;
		}
		
		.title-group .subtitle {
			font-size: 13px;
			color: var(--text-secondary);
			margin-top: 5px;
		}
		
		.version-display {
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		.version-badge-image {
			height: 60px;
		}
		
		.header-bottom-deco {
			height: 3px;
			margin-top: 20px;
			background: linear-gradient(90deg, var(--accent-color), transparent);
			opacity: 0.5;
		}
		
		.main-content {
			padding: 30px;
			position: relative;
		}
		
		.main-content::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: repeating-linear-gradient(45deg, rgba(167, 169, 173, 0.02) 0, rgba(167, 169, 173, 0.02) 1px, transparent 1px, transparent 30px);
			background-size: 30px 30px;
			pointer-events: none;
			z-index: 0;
		}
		
		.section {
			margin-bottom: 35px;
			position: relative;
			z-index: 1;
		}
		
		.section:last-child {
			margin-bottom: 0;
		}
		
		.section-title {
			font-size: 20px;
			font-weight: 700;
			color: var(--text-primary);
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 12px;
		}
		
		.section-title .en-text {
			font-family: 'Orbitron', monospace;
			font-size: 18px;
			opacity: 0.7;
		}
		
		.section-title::before {
			content: '';
			display: block;
			width: 6px;
			height: 24px;
			background-color: var(--accent-color);
			clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
		}
		
		.commands-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 18px;
		}
		
		.commands-grid.three-columns {
			grid-template-columns: repeat(3, 1fr);
		}
		
		.command-card {
			background-color: var(--card-bg);
			border-radius: 8px;
			display: flex;
			align-items: center;
			overflow: hidden;
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-left: 4px solid var(--category-color);
		}
		
		.command-card.install {
			--category-color: var(--color-install);
		}
		
		.command-card.operation {
			--category-color: var(--color-op);
		}
		
		.command-card.management {
			--category-color: var(--color-manage);
		}
		
		.command-card.testing {
			--category-color: var(--color-test);
		}

        .command-card.third-party {
			--category-color: var(--color-third-party);
		}
		
		.card-icon {
			flex-shrink: 0;
			width: 80px;
			height: 80px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.card-icon img {
			width: 48px;
			height: 48px;
			object-fit: contain;
		}
		
		.card-content {
			padding: 15px 0px 15px 0;
		}
		
		.command-name {
			font-size: 15px;
			font-weight: 700;
			margin-bottom: 4px;
		}
		
		.command-name .highlight {
			font-family: 'Orbitron', sans-serif;
			color: var(--accent-color);
			margin-left: 4px;
		}
		
		.command-desc {
			font-size: 13px;
			color: var(--text-secondary);
			line-height: 1.4;
		}
		
		.command-card.span-2-columns {
			grid-column: span 2;
		}

        .command-card.span-3-columns {
			grid-column: span 3;
		}
		
		.footer {
			text-align: center;
			padding: 20px;
			font-size: 14px;
			color: var(--text-secondary);
			font-family: 'Orbitron', monospace;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
			margin-top: 15px;
		}
	</style>
</head>

<body style="{{scaleStyleValue}}">
	<div class="container">
		<header class="header">
			<div class="header-top">
				<div class="title-group">
					<h1>GUGUNIU HELP TERMINAL</h1>
					<div class="subtitle">GuGuNiu & Miao-Plugin & ZZZ-Plugin & Waves-Plugin</div>
				</div>
				<div class="version-display">
					<img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/icon/16.png" class="version-badge-image">
				</div>
			</div>
			<div class="header-bottom-deco"></div>
		</header>

		<main class="main-content">
			<div class="section">
				<h2 class="section-title">核心组件 <span class="en-text">// CORE COMPONENTS</span></h2>
				<div class="commands-grid">
					<div class="command-card install">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/125712462_p0_square1200.png"></div>
						<div class="card-content">
							<div class="command-name">#下载咕咕牛</div>
							<div class="command-desc">初始化并下载所有图库仓库</div>
						</div>
					</div>
					<div class="command-card install">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/125727901_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#更新咕咕牛</div>
							<div class="command-desc">拉取所有仓库的最新更新</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<h2 class="section-title">图库操作 <span class="en-text">// GALLERY OPS</span></h2>
				<div class="commands-grid three-columns">
					<div class="command-card operation">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/125743174_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#启/禁用咕咕牛</div>
							<div class="command-desc">控制图库与插件的同步</div>
						</div>
					</div>
					<div class="command-card operation">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/126098446.webp"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛状态</div>
							<div class="command-desc">显示详细的本地图库状态</div>
						</div>
					</div>
					<div class="command-card operation">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/126622061.webp"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛查看</div>
							<div class="command-desc">查看角色或标签图片</div>
						</div>
					</div>
					<div class="command-card operation">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/129885782_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛导出<span class="highlight">xx</span></div>
							<div class="command-desc">以文件形式发送指定图片</div>
						</div>
					</div>
					<div class="command-card operation">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/130030673_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#可视化<span class="highlight">xx</span></div>
							<div class="command-desc">查看角色所有面板图预览</div>
						</div>
					</div>
					<div class="command-card operation">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/130198264_p0_square1200.png"></div>
						<div class="card-content">
							<div class="command-name">#重置咕咕牛</div>
							<div class="command-desc">!危险! 清理所有图库文件</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<h2 class="section-title">安全控制 <span class="en-text">// SECURITY & SETTINGS</span></h2>
				<div class="commands-grid">
					<div class="command-card management">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/130221954_p0_square1200.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛封/解禁<span class="highlight">xx</span></div>
							<div class="command-desc">手动封禁或解禁指定图片</div>
						</div>
					</div>
					<div class="command-card management">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/130403594_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛封禁列表</div>
							<div class="command-desc">以图片形式展示所有封禁项</div>
						</div>
					</div>
					<div class="command-card management">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/130731092_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛设置<span class="highlight">净化等级0-2</span></div>
							<div class="command-desc">设置R18等内容的过滤级别</div>
						</div>
					</div>
					<div class="command-card management">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/101546980_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛面板</div>
							<div class="command-desc">打开可视化的设置面板</div>
						</div>
					</div>
					<div class="command-card management span-2-columns">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/111386341_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛设置<span class="highlight">xx开启/关闭</span></div>
							<div class="command-desc">可设置：Ai, 彩蛋, 横屏, 低负载, 高级合并, 原图拦截</div>
						</div>
					</div>
				</div>
			</div>

            <div class="section">
                <h2 class="section-title">第三方图库管理 <span class="en-text">// 3RD-PARTY</span></h2>
                <div class="commands-grid">
                    <div class="command-card third-party span-2-columns">
                        <div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/130520362_p0.png"></div>
                        <div class="card-content">
                            <div class="command-name">#咕咕牛安装<span class="highlight">URL:简称</span></div>
                            <div class="command-desc">安装一个第三方图库,示例：#咕咕牛安装https://github.com/GuGuNiu/Miao-Plugin-MBT:咕咕牛</div>
                        </div>
                    </div>
                </div>
                <div class="commands-grid three-columns" style="margin-top: 18px;">
                     <div class="command-card third-party">
                        <div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/131286499_p0.png"></div>
                        <div class="card-content">
                            <div class="command-name">#咕咕牛更新<span class="highlight">简称</span></div>
                            <div class="command-desc">更新指定或全部图库</div>
                        </div>
                    </div>
                    <div class="command-card third-party">
                        <div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/131811007_p0.png"></div>
                        <div class="card-content">
                            <div class="command-name">#咕咕牛卸载<span class="highlight">简称</span></div>
                            <div class="command-desc">卸载指定的图库</div>
                        </div>
                    </div>
                    <div class="command-card third-party">
                        <div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/131553305_p0.png"></div>
                        <div class="card-content">
                            <div class="command-name">#咕咕牛列表</div>
                            <div class="command-desc">查看已安装的图库</div>
                        </div>
                    </div>
                </div>
            </div>

			<div class="section">
				<h2 class="section-title">诊断工具 <span class="en-text">// DIAGNOSTICS</span></h2>
				<div class="commands-grid">
					<div class="command-card testing">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/124862824_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛测速</div>
							<div class="command-desc">测试所有下载代理节点的延迟</div>
						</div>
					</div>
					<div class="command-card testing">
						<div class="card-icon"><img src="https://gitee.com/GuGuNiu/Miao-Plugin-MBT/raw/master/html/img/picture/124932075_p0.png"></div>
						<div class="card-content">
							<div class="command-name">#咕咕牛触发</div>
							<div class="command-desc">开发者用，用于模拟各种错误</div>
						</div>
					</div>
				</div>
			</div>
		</main>

		<footer class="footer">
			Miao-Plugin-MBT v{{ pluginVersion }}
		</footer>
	</div>
</body>

</html>